<style lang=sass>
@import "../../assets/sass/toast/toast.scss";
</style>
<template>
<div class="vue-toast-mask" v-show="visible" :class="transitionCls">
	<div class="vue-toast" :class="className" >
		<div class="vue-toast-text">
			<span>{{text}}</span>
		</div>
	</div>
</div>
</template>

<script>
export default{
	props:{
		visible:{
			type:Boolean,
			default:false,
			twoWay:true
		},
		text:String,
		transition:{
			type:String,
			default:"fadeIn"
		},
		position:String,
		autoPlay:{
			type:Boolean,
			default:false
		},
		delay:{
			type:Number,
			default:2000
		}
	},
	data(){
		return{
			className:null,
			transitionCls:null
		}
	},
	created(){
		switch(this.position){
			case "top":this.className="vue-toast-top";break;
			case "bottom":this.className="vue-toast-bottom";break;
			default:this.className="vue-toast-center";break;
		}

	},
	watch:{
		visible(val){
			//console.log(this.autoPlay)
			if(val&&this.autoPlay){
				this.autoHide();
			}

			if(val){
				switch(this.transition){
					case "fadeIn":this.transitionCls="vue-toast-fade-in";break;
					case "fadeUp":this.transitionCls="vue-toast-fade-up";break;
					case "fadeDown":this.transitionCls="vue-toast-fade-down";break;
				}
			}else{
				this.transitionCls=null;
			}
			
		}
		
	},
	methods:{
		autoHide(){
			var self=this;
			var timer=setTimeout(function(){
				console.log("hide")
				clearTimeout(timer);
				self.visible=false;
			},this.delay);
		}
	}
}
</script>